<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body onload="">
    <canvas id="mycanvas" height="150" width="150"></canvas>
    <script>
        // 需求：边框行军蚁特效

        // 初始化偏移量
        let offset = 0;
        function draw() {
            const canvasId = $("#mycanvas")[0];
            const ctx = canvasId.getContext && canvasId.getContext("2d");
            // 这里不太明白为什么要先清除矩形？但是不清除又看不到虚线
            ctx.clearRect(0, 0, canvasId.width, canvasId.height);
            // 接受一个数组，来指定线段与间隙的交替，参数1是线段的长度，参数2是间隙的长度
            ctx.setLineDash([4, 2]);
            // 设置起始偏移量
            ctx.lineDashOffset = -offset;
            ctx.strokeRect(10, 10, 100, 100);
        }
        function march() {
            offset++;
            if (offset >  16) {
                offset = 0;
            }
            draw();
            setTimeout(march, 50);
        }
        march();
    </script>
</body>
</html>